<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue v-model 指令HTML示例</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 10px;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 20px;
        }
        h2 {
            color: #34495e;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-top: 10px;
        }
        h3 {
            color: #2980b9;
            margin-top: 25px;
        }
        .form-group {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        label {
            display: inline-block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        input[type="checkbox"], input[type="radio"] {
            width: auto;
            margin-right: 8px;
        }
        .checkbox-group, .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 10px;
        }
        .checkbox-item, .radio-item {
            display: flex;
            align-items: center;
        }
        .output {
            background-color: #ecf0f1;
            padding: 15px;
            border-radius: 5px;
            margin-top: 10px;
            border-left: 4px solid #3498db;
        }
        .output strong {
            color: #2c3e50;
        }
        .demo-section {
            margin-bottom: 20px;
        }
        button {
            background-color: #3498db;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        button:hover {
            background-color: #2980b9;
        }
        button:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
        }
        .form-preview {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 5px;
            margin-top: 20px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            overflow-x: auto;
        }
        .code-block {
            background-color: #2d3748;
            border-radius: 8px;
            padding: 0;
            margin: 15px 0;
            overflow: hidden;
        }
        .code-block textarea {
            height: 300px;
            font-family: 'Consolas', '微软雅黑';
            font-size: 13px;
            padding: 15px;
            border: none;
            border-radius: 0;
            background-color: transparent;
            resize: none;
            line-height: 1.5;
            box-sizing: border-box;
            color: #e2e8f0;
            width: 100%;
            outline: none;
        }
        .modifier-demo {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 15px;
        }
        @media (max-width: 768px) {
            .modifier-demo {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div>
        <h1>Vue v-model 指令HTML示例</h1>
        
        <!-- 1. 文本输入框示例 -->
        <div class="container demo-section" id="text-input-example">
            <h2>1. 文本输入框 (input type="text")</h2>
            <div class="code-block">
                <textarea readonly>
<template>
  <div class="form-group">
    <label for="textInput">请输入文本：</label>
    <input 
      id="textInput"
      v-model="textValue" 
      type="text" 
      placeholder="请输入文本"
    />
    <div class="output">
      <strong>输入的内容：</strong> {{ textValue }}
    </div>
  </div>
</template>
                </textarea>
            </div>
            <div class="form-group">
                <label for="textInput">请输入文本：</label>
                <input 
                    id="textInput"
                    v-model="textValue" 
                    type="text" 
                    placeholder="请输入文本"
                />
                <div class="output">
                    <strong>输入的内容：</strong> {{ textValue }}
                </div>
            </div>
        </div>

        <!-- 2. 多行文本框示例 -->
        <div class="container demo-section" id="textarea-example">
            <h2>2. 多行文本框 (textarea)</h2>
            <div class="code-block">
                <textarea readonly>
<template>
  <div class="form-group">
    <label for="textareaInput">请输入多行文本：</label>
    <!-- 暂时用text代替textarea -->
    <text
      id="textareaInput"
      v-model="textareaValue" 
      placeholder="请输入多行文本"
      rows="4"
    ></text>
    <div class="output">
      <strong>文本内容：</strong><br>{{ textareaValue }}
    </div>
  </div>
</template>
                </textarea>
            </div>
            <div class="form-group">
                <label for="textareaInput">请输入多行文本：</label>
                <textarea 
                    id="textareaInput"
                    v-model="textareaValue" 
                    placeholder="请输入多行文本"
                    rows="4"
                ></textarea>
                <div class="output">
                    <strong>文本内容：</strong><br>{{ textareaValue }}
                </div>
            </div>
        </div>

        <!-- 3. 复选框示例 -->
        <div class="container demo-section" id="checkbox-example">
            <h2>3. 复选框 (input type="checkbox")</h2>
            <div class="code-block">
                <textarea readonly>
<template>
  <!-- 单个复选框 -->
  <div class="checkbox-item">
    <input 
      v-model="singleChecked" 
      type="checkbox" 
      id="singleCheckbox"
    />
    <label for="singleCheckbox">{{ singleChecked ? '已选中' : '未选中' }}</label>
  </div>
  
  <!-- 多个复选框 -->
  <div class="checkbox-group">
    <div class="checkbox-item">
      <input v-model="checkedNames" type="checkbox" id="jack" value="Jack" />
      <label for="jack">Jack</label>
    </div>
    <div class="checkbox-item">
      <input v-model="checkedNames" type="checkbox" id="john" value="John" />
      <label for="john">John</label>
    </div>
  </div>
</template>
                </textarea>
            </div>
            
            <h3>3.1 单个复选框</h3>
            <div class="form-group">
                <div class="checkbox-item">
                    <input 
                        v-model="singleChecked" 
                        type="checkbox" 
                        id="singleCheckbox"
                    />
                    <label for="singleCheckbox">{{ singleChecked ? '已选中' : '未选中' }}</label>
                </div>
                <div class="output">
                    <strong>选中状态：</strong> {{ singleChecked }}
                </div>
            </div>

            <h3>3.2 多个复选框</h3>
            <div class="form-group">
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input 
                            v-model="checkedNames" 
                            type="checkbox" 
                            id="jack" 
                            value="Jack"
                        />
                        <label for="jack">Jack</label>
                    </div>
                    <div class="checkbox-item">
                        <input 
                            v-model="checkedNames" 
                            type="checkbox" 
                            id="john" 
                            value="John"
                        />
                        <label for="john">John</label>
                    </div>
                    <div class="checkbox-item">
                        <input 
                            v-model="checkedNames" 
                            type="checkbox" 
                            id="mike" 
                            value="Mike"
                        />
                        <label for="mike">Mike</label>
                    </div>
                </div>
                <div class="output">
                    <strong>选中的名字：</strong> {{ checkedNames.join(', ') || '无' }}
                </div>
            </div>
        </div>

        <!-- 4. 单选按钮示例 -->
        <div class="container demo-section" id="radio-example">
            <h2>4. 单选按钮 (input type="radio")</h2>
            <div class="code-block">
                <textarea readonly>
<template>
  <div class="radio-group">
    <div class="radio-item">
      <input 
        v-model="picked" 
        type="radio" 
        id="option1" 
        value="选项一"
      />
      <label for="option1">选项一</label>
    </div>
    <div class="radio-item">
      <input 
        v-model="picked" 
        type="radio" 
        id="option2" 
        value="选项二"
      />
      <label for="option2">选项二</label>
    </div>
    <div class="radio-item">
      <input 
        v-model="picked" 
        type="radio" 
        id="option3" 
        value="选项三"
      />
      <label for="option3">选项三</label>
    </div>
  </div>
  <div class="output">
    <strong>选中的值：</strong> {{ picked || '未选择' }}
  </div>
</template>
                </textarea>
            </div>
            <div class="form-group">
                <div class="radio-group">
                    <div class="radio-item">
                        <input 
                            v-model="picked" 
                            type="radio" 
                            id="option1" 
                            value="选项一"
                        />
                        <label for="option1">选项一</label>
                    </div>
                    <div class="radio-item">
                        <input 
                            v-model="picked" 
                            type="radio" 
                            id="option2" 
                            value="选项二"
                        />
                        <label for="option2">选项二</label>
                    </div>
                    <div class="radio-item">
                        <input 
                            v-model="picked" 
                            type="radio" 
                            id="option3" 
                            value="选项三"
                        />
                        <label for="option3">选项三</label>
                    </div>
                </div>
                <div class="output">
                    <strong>选中的值：</strong> {{ picked || '未选择' }}
                </div>
            </div>
        </div>

        <!-- 5. 下拉选择框示例 -->
        <div class="container demo-section" id="select-example">
            <h2>5. 下拉选择框 (select)</h2>
            <div class="code-block">
                <textarea readonly>
<template>
  <!-- 单选下拉框 -->
  <div class="form-group">
    <label for="singleSelect">请选择城市：</label>
    <select id="singleSelect" v-model="selectedCity">
      <option disabled value="">请选择城市</option>
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
    </select>
  </div>
  
  <!-- 多选下拉框 -->
  <div class="form-group">
    <label for="multiSelect">请选择技能（按住Ctrl多选）：</label>
    <select id="multiSelect" v-model="multiSelected" multiple>
      <option value="JavaScript">JavaScript</option>
      <option value="Vue.js">Vue.js</option>
      <option value="React">React</option>
      <option value="Node.js">Node.js</option>
      <option value="Python">Python</option>
    </select>
  </div>
</template>
                </textarea>
            </div>
            
            <h3>5.1 单选下拉框</h3>
            <div class="form-group">
                <label for="singleSelect">请选择城市：</label>
                <select id="singleSelect" v-model="selectedCity">
                    <option disabled value="">请选择城市</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州">广州</option>
                    <option value="深圳">深圳</option>
                </select>
                <div class="output">
                    <strong>选中的城市：</strong> {{ selectedCity || '未选择' }}
                </div>
            </div>

            <h3>5.2 多选下拉框</h3>
            <div class="form-group">
                <label for="multiSelect">请选择技能（按住Ctrl多选）：</label>
                <select id="multiSelect" v-model="multiSelected" multiple>
                    <option value="JavaScript">JavaScript</option>
                    <option value="Vue.js">Vue.js</option>
                    <option value="React">React</option>
                    <option value="Node.js">Node.js</option>
                    <option value="Python">Python</option>
                </select>
                <div class="output">
                    <strong>选中的技能：</strong> {{ multiSelected.join(', ') || '未选择' }}
                </div>
            </div>
        </div>

        <!-- 6. 数字输入框示例 -->
        <div class="container demo-section" id="number-input-example">
            <h2>6. 数字输入框 (input type="number")</h2>
            <div class="code-block">
                <textarea readonly>
<template>
  <div class="form-group">
    <label for="numberInput">请输入年龄：</label>
    <input 
      id="numberInput"
      v-model.number="age" 
      type="number" 
      min="1" 
      max="120"
      placeholder="请输入年龄"
    />
    <div class="output">
      <strong>年龄：</strong> {{ age }} (类型：{{ typeof age }})
    </div>
  </div>
</template>
                </textarea>
            </div>
            <div class="form-group">
                <label for="numberInput">请输入年龄：</label>
                <input 
                    id="numberInput"
                    v-model.number="age" 
                    type="number" 
                    min="1" 
                    max="120"
                    placeholder="请输入年龄"
                />
                <div class="output">
                    <strong>年龄：</strong> {{ age }} (类型：{{ typeof age }})
                </div>
            </div>
        </div>

        <!-- 7. 其他输入类型示例 -->
        <div class="container demo-section" id="other-input-example">
            <h2>7. 其他输入类型</h2>
            <div class="code-block">
                <textarea readonly>
<template>
  <!-- 密码输入框 -->
  <input v-model="password" type="password" placeholder="请输入密码" />
  
  <!-- 邮箱输入框 -->
  <input v-model="email" type="email" placeholder="请输入邮箱" />
  
  <!-- 日期选择器 -->
  <input v-model="date" type="date" />
  
  <!-- 颜色选择器 -->
  <input v-model="color" type="color" />
  
  <!-- 范围滑块 -->
  <input v-model="range" type="range" min="0" max="100" />
</template>
                </textarea>
            </div>
            
            <div class="form-group">
                <label for="passwordInput">密码：</label>
                <input 
                    id="passwordInput"
                    v-model="password" 
                    type="password" 
                    placeholder="请输入密码"
                />
                <div class="output">
                    <strong>密码长度：</strong> {{ password.length }} 个字符
                </div>
            </div>

            <div class="form-group">
                <label for="emailInput">邮箱：</label>
                <input 
                    id="emailInput"
                    v-model="email" 
                    type="email" 
                    placeholder="请输入邮箱"
                />
                <div class="output">
                    <strong>邮箱：</strong> {{ email }}
                </div>
            </div>

            <div class="form-group">
                <label for="dateInput">日期：</label>
                <input 
                    id="dateInput"
                    v-model="date" 
                    type="date"
                />
                <div class="output">
                    <strong>选择的日期：</strong> {{ date }}
                </div>
            </div>

            <div class="form-group">
                <label for="colorInput">颜色：</label>
                <input 
                    id="colorInput"
                    v-model="color" 
                    type="color"
                />
                <div class="output" :style="{backgroundColor: color, color: getContrastColor(color)}">
                    <strong>选择的颜色：</strong> {{ color }}
                </div>
            </div>

            <div class="form-group">
                <label for="rangeInput">范围滑块 (0-100)：</label>
                <input 
                    id="rangeInput"
                    v-model="range" 
                    type="range" 
                    min="0" 
                    max="100"
                />
                <div class="output">
                    <strong>当前值：</strong> {{ range }}
                </div>
            </div>
        </div>

        <!-- 8. v-model修饰符示例 -->
        <div class="container demo-section" id="modifier-example">
            <h2>8. v-model 修饰符示例</h2>
            <div class="code-block">
                <textarea readonly>
<template>
  <!-- .lazy 修饰符：失去焦点时更新 -->
  <input v-model.lazy="lazyInput" type="text" placeholder="失去焦点时更新" />
  
  <!-- .number 修饰符：自动转换为数字 -->
  <input v-model.number="numberInput" type="text" placeholder="输入数字" />
  
  <!-- .trim 修饰符：自动去除首尾空格 -->
  <input v-model.trim="trimInput" type="text" placeholder="输入带空格的文本" />
  
  <!-- 修饰符组合使用 -->
  <input v-model.lazy.trim="combinedInput" type="text" placeholder="组合修饰符" />
</template>
                </textarea>
            </div>
            
            <div class="modifier-demo">
                <div class="form-group">
                    <h3>.lazy 修饰符</h3>
                    <label>普通输入（实时更新）：</label>
                    <input v-model="normalInput" type="text" placeholder="实时更新">
                    <div class="output">
                        <strong>值：</strong> {{ normalInput }}
                    </div>
                    
                    <label>.lazy 输入（失去焦点时更新）：</label>
                    <input v-model.lazy="lazyInput" type="text" placeholder="失去焦点时更新">
                    <div class="output">
                        <strong>值：</strong> {{ lazyInput }}
                    </div>
                </div>

                <div class="form-group">
                    <h3>.number 修饰符</h3>
                    <label>自动转换为数字：</label>
                    <input v-model.number="numberInput" type="text" placeholder="输入数字">
                    <div class="output">
                        <strong>值：</strong> {{ numberInput }} (类型：{{ typeof numberInput }})
                    </div>
                </div>
            </div>

            <div class="form-group">
                <h3>.trim 修饰符</h3>
                <label>自动去除首尾空格：</label>
                <input v-model.trim="trimInput" type="text" placeholder="输入带空格的文本">
                <div class="output">
                    <strong>值：</strong> "{{ trimInput }}" (长度：{{ trimInput.length }})
                </div>
            </div>

            <div class="form-group">
                <h3>修饰符组合使用</h3>
                <label>组合修饰符 (.lazy.trim)：</label>
                <input v-model.lazy.trim="combinedInput" type="text" placeholder="失去焦点时更新并去除空格">
                <div class="output">
                    <strong>值：</strong> "{{ combinedInput }}"
                </div>
            </div>
        </div>

        <!-- 9. 综合表单示例 -->
        <div class="container demo-section" id="form-example">
            <h2>9. 综合用户注册表单示例</h2>
            <div class="code-block">
                <textarea readonly style="height: 300px;">
<template>
  <form @submit.prevent="submitForm">
    <!-- 用户名 -->
    <input v-model.trim="form.username" type="text" placeholder="请输入用户名" required />
    
    <!-- 密码 -->
    <input v-model="form.password" type="password" placeholder="请输入密码" required />
    
    <!-- 年龄 -->
    <input v-model.number="form.age" type="number" min="1" max="120" placeholder="请输入年龄" />
    
    <!-- 性别 -->
    <input v-model="form.gender" type="radio" value="male" id="male" />
    <label for="male">男</label>
    <input v-model="form.gender" type="radio" value="female" id="female" />
    <label for="female">女</label>
    
    <!-- 爱好 -->
    <input v-model="form.hobbies" type="checkbox" value="reading" id="reading" />
    <label for="reading">阅读</label>
    <input v-model="form.hobbies" type="checkbox" value="music" id="music" />
    <label for="music">音乐</label>
    
    <!-- 城市 -->
    <select v-model="form.city">
      <option value="">请选择城市</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
    </select>
    
    <!-- 个人简介 -->
    <textarea v-model.trim="form.bio" placeholder="请输入个人简介"></textarea>
    
    <!-- 同意协议 -->
    <input v-model="form.agree" type="checkbox" id="agree" />
    <label for="agree">我同意用户协议</label>
    
    <button type="submit" :disabled="!form.agree">注册</button>
  </form>
</template>
                </textarea>
            </div>
            <form @submit.prevent="submitForm">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input 
                        id="username"
                        v-model.trim="form.username" 
                        type="text" 
                        required 
                        placeholder="请输入用户名"
                    />
                </div>
                
                <div class="form-group">
                    <label for="userPassword">密码：</label>
                    <input 
                        id="userPassword"
                        v-model="form.password" 
                        type="password" 
                        required 
                        placeholder="请输入密码"
                    />
                </div>
                
                <div class="form-group">
                    <label for="userAge">年龄：</label>
                    <input 
                        id="userAge"
                        v-model.number="form.age" 
                        type="number" 
                        min="1" 
                        max="120" 
                        placeholder="请输入年龄"
                    />
                </div>
                
                <div class="form-group">
                    <label>性别：</label>
                    <div class="radio-group">
                        <div class="radio-item">
                            <input 
                                v-model="form.gender" 
                                type="radio" 
                                value="male" 
                                id="male"
                            />
                            <label for="male">男</label>
                        </div>
                        <div class="radio-item">
                            <input 
                                v-model="form.gender" 
                                type="radio" 
                                value="female" 
                                id="female"
                            />
                            <label for="female">女</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>爱好：</label>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input 
                                v-model="form.hobbies" 
                                type="checkbox" 
                                value="reading" 
                                id="reading"
                            />
                            <label for="reading">阅读</label>
                        </div>
                        <div class="checkbox-item">
                            <input 
                                v-model="form.hobbies" 
                                type="checkbox" 
                                value="music" 
                                id="music"
                            />
                            <label for="music">音乐</label>
                        </div>
                        <div class="checkbox-item">
                            <input 
                                v-model="form.hobbies" 
                                type="checkbox" 
                                value="sports" 
                                id="sports"
                            />
                            <label for="sports">运动</label>
                        </div>
                        <div class="checkbox-item">
                            <input 
                                v-model="form.hobbies" 
                                type="checkbox" 
                                value="travel" 
                                id="travel"
                            />
                            <label for="travel">旅行</label>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="userCity">城市：</label>
                    <select id="userCity" v-model="form.city">
                        <option value="">请选择城市</option>
                        <option value="beijing">北京</option>
                        <option value="shanghai">上海</option>
                        <option value="guangzhou">广州</option>
                        <option value="shenzhen">深圳</option>
                        <option value="hangzhou">杭州</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="userBio">个人简介：</label>
                    <textarea 
                        id="userBio"
                        v-model.trim="form.bio" 
                        placeholder="请输入个人简介"
                        rows="4"
                    ></textarea>
                </div>
                
                <div class="form-group">
                    <div class="checkbox-item">
                        <input 
                            v-model="form.agree" 
                            type="checkbox" 
                            id="agree"
                        />
                        <label for="agree">我同意用户协议</label>
                    </div>
                </div>
                
                <button type="submit" :disabled="!form.agree">注册</button>
            </form>
            
            <div class="form-preview">
                <strong>表单数据实时预览：</strong>
{{ JSON.stringify(form, null, 2) }}
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, reactive } = Vue;

        // 1. 文本输入框示例
        createApp({
            setup() {
                const textValue = ref('');
                return { textValue };
            }
        }).mount('#text-input-example');

        // 2. 多行文本框示例
        createApp({
            setup() {
                const textareaValue = ref('');
                return { textareaValue };
            }
        }).mount('#textarea-example');

        // 3. 复选框示例
        createApp({
            setup() {
                const singleChecked = ref(false);
                const checkedNames = ref([]);
                return { singleChecked, checkedNames };
            }
        }).mount('#checkbox-example');

        // 4. 单选按钮示例
        createApp({
            setup() {
                const picked = ref('');
                return { picked };
            }
        }).mount('#radio-example');

        // 5. 下拉选择框示例
        createApp({
            setup() {
                const selectedCity = ref('');
                const multiSelected = ref([]);
                return { selectedCity, multiSelected };
            }
        }).mount('#select-example');

        // 6. 数字输入框示例
        createApp({
            setup() {
                const age = ref(null);
                return { age };
            }
        }).mount('#number-input-example');

        // 7. 其他输入类型示例
        createApp({
            setup() {
                const password = ref('');
                const email = ref('');
                const date = ref('');
                const color = ref('#3498db');
                const range = ref(50);

                const getContrastColor = (hexColor) => {
                    const r = parseInt(hexColor.slice(1, 3), 16);
                    const g = parseInt(hexColor.slice(3, 5), 16);
                    const b = parseInt(hexColor.slice(5, 7), 16);
                    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
                    return brightness > 128 ? '#000000' : '#ffffff';
                };

                return { password, email, date, color, range, getContrastColor };
            }
        }).mount('#other-input-example');

        // 8. v-model修饰符示例
        createApp({
            setup() {
                const normalInput = ref('');
                const lazyInput = ref('');
                const numberInput = ref('');
                const trimInput = ref('');
                const combinedInput = ref('');
                return { normalInput, lazyInput, numberInput, trimInput, combinedInput };
            }
        }).mount('#modifier-example');

        // 9. 综合表单示例
        createApp({
            setup() {
                const form = reactive({
                    username: '',
                    password: '',
                    age: null,
                    gender: '',
                    hobbies: [],
                    city: '',
                    bio: '',
                    agree: false
                });

                const submitForm = () => {
                    console.log('提交表单：', form);
                    alert('注册成功！请查看控制台输出。');
                };

                return { form, submitForm };
            }
        }).mount('#form-example');


    </script>
</body>
</html>